//商品信息详情页
//author：王梦阳

//获取从搜索得到的商品页面传来的值，并在商品详情页面显示
//用户id
var userId = localStorage.getItem("user"); 

let item_detail = {
	veision: 'v1.0',
	author: 'wmyang',
	getDetail: function() {
		let status = localStorage.status;
		let id = "";
		let type_id = "";
		let btn_id = "";
		if (status != 0) {
			let data = eval('(' + localStorage.dataset + ')');
			let htmlContent = ``; //商品详情信息
			btn_id = localStorage.id;
			type_id = data.data[btn_id].item_type_id;
			id = data.data[btn_id].item_id; //商品id
			htmlContent +=
				`<div class="item-img">
			        <img id="img" src="${data.data[btn_id].item_img}"/>
			    </div>
				<div id="item-formation">
				    <div id="price">
				    	<span id="item-price">￥${data.data[btn_id].item_price}</span>
				    	<span id="item-sale">已售${data.data[btn_id].item_sales}件</span>
				    </div>
					<div id="item-description">
						<span id="tuijian">
							<span>小编推荐</span>
						</span>
						<strong id="title">${data.data[btn_id].item_name}</strong>
					</div>
				</div>
				<div id="item-evaluate">
					<div id="evaluate">
						<span id="evaluate-title">商品评价</span>
						<span id="more">查看更多></span>
					</div>
					<div id="evaluate-content">
						
					</div>
				</div>`
			$(".content").html(htmlContent);
			//点击客服跳转到客服聊天页
			document.getElementById("bottom-chat").addEventListener('tap', function() {
				if(userId != ""){
					window.open("customer-chat.html", "_blank");
				}else{
					window.location.href = "login.html?npg=customer-chat.html";
				}
			})
			//请求获取商品评论相关内容
			$.ajax({
				type: "GET",
				url: "http://39.98.158.247:8040/comment/get?type=i&id=" + type_id,
				success: function(data) {
					console.log(data);
					let htmlContentC = "";
					// console.log(data.data[0].comment_content);
					if (data.data.length == 0) {
						htmlContentC +=
							`<div class="first">
								<span id="no-comment">该商品还没有评价</span>
							</div>	`;
						$("#evaluate-content").html(htmlContentC);
						document.getElementById("more").addEventListener('tap', function() {
							window.open("more-item-comment.html", "_blank");
							localStorage.itemId = type_id;
							console.log(localStorage.itemId);
						})
					} else {

						htmlContentC +=
							`<div class="first">
								<img id="touxiang" src="${data.data[0].user_picture}"/>
								<span id="nickname">${data.data[0].user_name}</span>
								<div id="content">${data.data[0].comment_content}</div>
							</div>`;

						$("#evaluate-content").html(htmlContentC);
						document.getElementById("more").addEventListener('tap', function() {
							window.open("more-item-comment.html", "_blank");
							localStorage.itemId = type_id;
							console.log(localStorage.itemId);
						})
					}
				},
				error: function() {
					console.log("request error");
				}
			})
		} else {
			btn_id = localStorage.id;
			$.ajax({
				type: "GET",
				dataType: "json",
				async: false,
				url: "http://39.98.158.247:8040/item/get/detail",
				data: {
					itemId: btn_id
				},
				success: function(data) {
					type_id = data.data.item_type_id;
					console.log(data);
					id = data.data.item_id; //商品id
					let htmlContent = ``;
					htmlContent +=
						`<div class="item-img">
					        <img id="img" src="${data.data.item_img}"/>
					     </div>
						<div id="item-formation">
						    <div id="price">
						    	<span id="item-price">￥${data.data.item_price}</span>
						    	<span id="item-sale">已售${data.data.item_sales}件</span>
						    </div>
							<div id="item-description">
								<span id="tuijian">
									<span>小编推荐</span>
								</span>
								<strong id="title">${data.data.item_name}</strong>
							</div>
						</div>
						<div id="item-evaluate">
							<div id="evaluate">
								<span id="evaluate-title">商品评价</span>
								<span id="more">查看更多></span>
							</div>
							<div id="evaluate-content">
							</div>
						</div>`
					$(".content").html(htmlContent);
					//点击客服跳转到客服聊天页
					document.getElementById("bottom-chat").addEventListener('tap', function() {
						if(userId != ""){
							window.open("customer-chat.html", "_blank");
						}else{
							window.location.href = "login.html?npg=search-item.html";
						}
						
					})
					$.ajax({
						type: "GET",
						url: "http://39.98.158.247:8040/comment/get?type=i&id=" + type_id,
						success: function(data) {
							let htmlContentC = "";
							console.log(data);
							// console.log(data.data[0].comment_content);
							if (data.data.length == 0) {
								htmlContentC +=
									`<div class="first">
									    <span id="no-comment">该商品还没有评价</span>
									 </div>	`;
								$("#evaluate-content").html(htmlContentC);
								document.getElementById("more").addEventListener('tap', function() {
									window.open("more-item-comment.html", "_blank");
									localStorage.itemId = type_id;
									console.log(localStorage.itemId);
								})
							} else {
								htmlContentC +=
									`<div class="first">
										<img id="touxiang" src="${data.data[0].user_picture}"/>
										<span id="nickname">${data.data[0].user_name}</span>
										<div id="content">${data.data[0].comment_content}</div>
									</div>`;

								$("#evaluate-content").html(htmlContentC);
								document.getElementById("more").addEventListener('tap', function() {
									window.open("more-item-comment.html", "_blank");
									localStorage.itemId = type_id;
								})
							}


						},
						error: function() {
							console.log("request error");
						}
					})

				},
				error: function() {
					console.log("request error");
				}
			})
		}

		//设置点击购买后弹出选择商品规格效果
		document.getElementById("purchase").addEventListener('tap', function() {

			$.ajax({
				url: "http://39.98.158.247:8040/item/detail",
				dataType: "json",
				data: {
					spu: type_id
				},
				success: function(data) {
					console.log(data);
					console.log(data.data[0].item_description);
					let obj = eval('(' + data.data[0].item_description + ')');
					let num = 1;
					let select_id = 0;
					let htmlContent2 = ""; //装载商品属性名
					let htmlContent3 = ""; //装载商品属性值
					let htmlContent5 = "";
					htmlContent5 +=
						`<span>${num}</span>`;
					$("#num").html(htmlContent5);

					//获取商品属性名
					for (var i = 0; i < obj.attributes.length; i++) {
						htmlContent2 +=
							`<span>${obj.attributes[i]}</span>`;
					}
					$("#attr-name").html(htmlContent2);

					//获取商品属性值
					for (var j = 0; j < data.data.length; j++) {
						obj = eval('(' + data.data[j].item_description + ')');
						htmlContent3 +=
							`<span class="attr-values" id="${j}">${obj.value}</span>`;
					}
					$("#attr-value").html(htmlContent3);
					//减少商品数量
					document.getElementById("lessen").addEventListener('tap', function() {
						let htmlContent5 = "";
						if (num > 0) {
							num--;
							// console.log(num);
						}
						htmlContent5 +=
							`<span>${num}</span>`;
						$("#num").html(htmlContent5);
						let htmlContent1 = ""; //装载选择的商品
						let price = data.data[select_id].item_price
						let totalP = 0;
						totalP = price * num;
						htmlContent1 +=
							`<img src="${data.data[select_id].item_img}"/>
						<span>￥${totalP}</span>`;
						$("#item-select").html(htmlContent1);
					})
					//增加商品数量
					document.getElementById("add").addEventListener('tap', function() {
						let htmlContent6 = "";
						num++;
						// console.log(num);
						htmlContent6 +=
							`<span>${num}</span>`;
						$("#num").html(htmlContent6);

						let htmlContent1 = ""; //装载选择的商品
						let price = data.data[select_id].item_price
						let totalP = 0;
						totalP = price * num;
						htmlContent1 +=
							`<img src="${data.data[select_id].item_img}"/>
							<span>￥${totalP}</span>`;
						$("#item-select").html(htmlContent1);

					})

					//根据选择的商品属性动态获取商品图片和价格
					for (var k = 0; k < data.data.length; k++) {
						document.getElementById(k).addEventListener('tap', function() {
							console.log(this.id);
							select_id = this.id;

							for (var m = 0; m < data.data.length; m++) {
								if (m == this.id) {
									document.getElementById(this.id).style.backgroundColor = "#d31b0e";
									document.getElementById(this.id).style.color = "white";
								} else {
									document.getElementById(m).style.backgroundColor = "#dfdfdf";
									document.getElementById(m).style.color = "#000000";
								}
							}

							let htmlContent1 = ""; //装载选择的商品
							let price = data.data[select_id].item_price
							let totalP = 0;
							totalP = price * num;
							htmlContent1 +=
								`<img src="${data.data[select_id].item_img}"/>
							<span>￥${totalP}</span>`;
							$("#item-select").html(htmlContent1);

						})
					}
					//点击确定按钮跳转到商品支付页
					document.getElementById("xiadan").addEventListener('tap', function() {
						window.open("pay-item.html", "_blank");
						localStorage.dataset = JSON.stringify(data);
						localStorage.id = select_id;
						localStorage.num = num;
					})
					mui('.mui-popover').popover('toggle', document.getElementById("openPopover"));
				},
				error: function() {
					console.log("request error");
				}
			})
		})
	}
}


window.onload = function() {
	item_detail.getDetail();
	localStorage.setItem("lpg","search-item.html");
}
